<template>
  <div class="my-form">
    <el-form
      label-position="top"
      label-width="auto"
      :model="form"
      :rules="rules"
      ref="formName"
    >
      <el-form-item label="成果名称" prop="productionName">
        <el-input
          size="small"
          v-if="flg != 1"
          v-model="form.productionName"
          placeholder="请输入成果名称"
        ></el-input>
        <span v-else>{{ form.productionName }}</span>
      </el-form-item>
      <el-form-item label="申报单位" prop="companyName">
        <el-input
          size="small"
          v-if="flg != 1"
          v-model="form.companyName"
          placeholder="请输入申报单位"
        ></el-input>
        <span v-else>{{ form.companyName }}</span>
      </el-form-item>
      <el-form-item label="单位所在省份" prop="companyAddress">
        <el-select
          size="small"
          v-if="flg != 1"
          v-model="form.companyAddress"
          placeholder="请选择单位所在省份"
        >
          <el-option
            v-for="item in options"
            :key="item.name"
            :label="item.name"
            :value="item.name"
          ></el-option>
        </el-select>
        <span v-else>{{ form.companyAddress }}</span>
      </el-form-item>
      <el-form-item label="联系人" prop="name">
        <el-input
          size="small"
          v-if="flg != 1"
          v-model="form.name"
          placeholder="请输入联系人"
        ></el-input>
        <span v-else>{{ form.name }}</span>
      </el-form-item>
      <el-form-item label="手机号码" prop="contactPhone">
        <el-input
          size="small"
          v-if="flg != 1"
          v-model="form.contactPhone"
          placeholder="请输入手机号码"
        ></el-input>
        <span v-else>{{ form.contactPhone }}</span>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import { citys } from '../../lib/citys/index'

export default {
  components: {},
  props: {
    form: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      flg: 0,
      details: {},
      options: citys,
      defaultParams: {
        label: 'name',
        value: 'name',
        children: 'childsList',
        expandTrigger: 'hover',
      },
      rules: {
        productionName: [
          { required: true, message: '请输入成果名称', trigger: 'blur' },
        ],
        companyName: [
          { required: true, message: '请输入申报单位', trigger: 'blur' },
        ],
        companyAddress: [
          { required: true, message: '请选择单位所在省份', trigger: 'blur' },
        ],
        spared1: [
          { required: true, message: '请选择单位所在省份', trigger: 'change' },
        ],
        name: [
          { required: true, message: '请输入联系人', trigger: 'blur' },
          {
            validator(rule, value, callback) {
              var reg = /^[a-zA-Z\u4e00-\u9fa5]+$/
              if (reg.test(value)) {
                callback()
              } else {
                callback(new Error('不能有数字和特殊符号'))
              }
            },
            trigger: 'blur',
          },
        ],
        contactPhone: [
          { required: true, message: '请输入联系方式', trigger: 'blur' },
          {
            validator(rule, value, callback) {
              var reg = /^\d{1,}$/
              if (reg.test(value) && value.length > 5) {
                callback()
              } else {
                callback(new Error('请输入数字且不少于五位数字'))
              }
            },
            trigger: 'blur',
          },
        ],
      },
    }
  },

  async mounted() {},
  methods: {},
}
</script>
<style lang="less" scoped>
.my-form {
  /deep/ .el-form-item__label {
    padding-bottom: 0;
  }
  /deep/ .el-form-item {
    margin-bottom: 6px;
  }
  /deep/ .el-select {
    width: 100%;
  }
}
</style>
